<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-plus" @click="handleAdd">
          添加
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="dictName"
        label="服务群体">
      </el-table-column>
      <el-table-column
        prop="dictLabel"
        label="服务症状">
      </el-table-column>
<!--      <el-table-column-->
<!--        label="图片">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-avatar shape="square" :size="100" :src="row.picUrl" />-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column
        label="操作">
        <template slot-scope="{row}">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="primary"-->
<!--            @click="view(row)">查看</el-button>-->
          <el-button
            size="mini"
            type="danger"
            @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-loading="loading" :visible.sync="dialogFormVisible">
      <el-form label-width="88px" :model="form">
        <el-form-item label="服务群体">
          <el-select size="medium" v-model="form.dictType" placeholder="请选择">
            <el-option
              v-for="item in qunti"
              :key="item.dictId"
              :label="item.dictName"
              :value="item.dictType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务症状">
          <el-input v-model="form.dictLabel" />
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload
            class="avatar-uploader"
            action="http://47.101.57.131:8101/common/api/file/upload2"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="form.picUrl" :src="form.picUrl" class="avatar"  alt=""/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
<!--        {{ form.courseVos}}-->
        <el-form-item label="推荐课程">
          <el-select size="medium" v-model="form.courseVos" multiple placeholder="请选择">
            <el-option
              v-for="item in kecheng"
              :key="item.id"
              :label="item.courseTitle"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
<!--      {{ form.expressionInfo }}-->
      <dynamicValidateForm
        label="症状表现"
        v-model="form.expressionInfo" />
      <dynamicValidateForm
        label="症状成因"
        v-model="form.causeInfo" />
      <dynamicValidateForm
        label="怎么解决"
        v-model="form.solveInfo" />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      style="margin-top: 20px;"
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {delTeam, upTeam} from "@/api/team";
import {deepClone} from "@/utils";
import {getServiceQ, getServiceSymptom,addServiceSymptom} from "@/api/serviceSymptom";
import dynamicValidateForm from "@/views/serviceSymptom/dynamicValidateForm";
import { getKcc } from "@/api/kecheng";

export default {
  name: 'SysRoleList',
  components:{
    dynamicValidateForm
  },
  data() {
    return {
      tableData:[],
      dialogFormVisible:false,
      total:0,
      loading:false,
      form:{
        "dictLabel": "",
        "fileId": 1,
        "dictType": "",
        "picUrl": "",
        "primaryTitle": '',
        "secondaryTitle": "",
        "expressionInfo": [],  // 表现
        "causeInfo": [],  //成因
        "solveInfo": [], // 怎么解决
        "courseVos": []  //推荐课程
      },
      bianji:false,
      current:1,
      kecheng:[],
      qunti:[]
    }
  },
  created() {
    this.getList()
    getKcc(1,10000).then(({data})=>{
      console.log(data)
      this.kecheng = data.records
    })
    getServiceQ(1,10000).then(res=>{
      console.log(res.data)
      this.qunti = res.data.records
    })
  },
  methods: {
    getList(){
      getServiceSymptom(this.current).then(res=>{
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleAdd(){
      this.bianji = false
      this.dialogFormVisible = true
    },
    del(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delTeam(row.dictCode)
        this.$message.success('操作成功')
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    currentChange(page){
      this.current = page
      this.getList()
    },
    async submit(){
      if (this.bianji){
        await upTeam(this.form)
      }else {
        this.form.primaryTitle = this.form.dictLabel+'怎么办?'
        const res = await addServiceSymptom(this.form)
        console.log(res)
      }
      this.dialogFormVisible = false
      this.getList()
      this.$message.success('操作成功')
    },
    update(row){
      this.bianji = true
      this.form = deepClone(row)
      this.dialogFormVisible = true
    },
    handleAvatarSuccess(res){
      console.log(res)
      this.form.picUrl = res.data.fileUrl
      this.form.fileId = res.data.id
    },
    view(row){

    }
  }
}
</script>
<style scoped>

</style>
